<script setup lang="ts">
import ToolView from "@/modules/tools/layout/tool-view.vue";
import { onMounted, ref, watch } from "vue";
import Grid from "@/components/framework/grid.vue";
import { useLocalRef } from "@/framework/vue/hooks/state.ts";
import { generateArticleZh, randomTopicZh } from "./bullshit.zh.ts";
import { generateArticleEn, randomTopicEn } from "./bullshit.en.ts";
import { noop } from "@/framework/util/warning.ts";
import { message } from "ant-design-vue";
import { copyText } from "@/util/clipboard.ts";

const lang = useLocalRef("tools.buillshit.lang", "zh");

const topic = ref("");
const article = ref("");

const randomTopic = () => {
  if (lang.value === "zh") {
    topic.value = randomTopicZh();
  } else {
    topic.value = randomTopicEn();
  }
};

const generateArticle = () => {
  if (lang.value === "zh") {
    article.value = generateArticleZh(topic.value);
  } else {
    article.value = generateArticleEn(topic.value);
  }
};

onMounted(() => {
  randomTopic();
});

watch(lang, () => randomTopic());

const saveTxt = () => {
  const filename = `${topic.value}.txt`;
  native.dialog
    .showSaveDialog({ title: "保存文件", defaultPath: filename, filters: [{ name: "文本文件", extensions: ["txt"] }] })
    .then(ret => {
      if (!ret.canceled) {
        native.fs.writeFile(ret.filePath, article.value);
        message.success("保存成功");
      }
    })
    .catch(noop);
};
</script>

<template>
  <tool-view title="狗屁不通文章生成" description="生成一篇狗屁不通但像模像样的“长篇大论”" description2="https://github.com/menzi11/BullshitGenerator">
    <div class="pv-20 full-view">
      <grid rows-preset="two-rows-0" row-gap="10px">
        <div class="flex aic col-gap-10 ph-10">
          <span>主题：</span>
          <div class="flex-1">
            <a-input v-model:value="topic" placeholder="主题" allow-clear />
          </div>

          <a-select v-model:value="lang" class="w-130">
            <a-select-option value="zh">中文</a-select-option>
            <a-select-option value="en">English</a-select-option>
          </a-select>
          <a-button-group>
            <a-button @click="randomTopic">随机主题</a-button>
            <a-button @click="generateArticle">生成文章</a-button>
            <a-button :disabled="!article" @click="copyText(article)">复制文章</a-button>
            <a-button :disabled="!article" @click="saveTxt">保存文件</a-button>
          </a-button-group>
        </div>
        <div class="bullshit-article">
          <pre class="select-text">{{ article }}</pre>
        </div>
      </grid>
    </div>
  </tool-view>
</template>

<style scoped lang="less">
.bullshit-article {
  overflow: auto;
  padding-left: 10px;

  pre {
    white-space: pre-wrap;
    font-size: 14px;
    font-family: inherit;
    line-height: 22px;
    overflow: visible;
  }
}
</style>
